// pages/lucky-wheel/config/index.js

const app = getApp()

// 预设颜色数组 - 使用更柔和的颜色
const PRESET_COLORS = [
  '#ff9eb6', '#ffb5c2', '#ffc2d4', '#ffd6e7', // 粉色系
  '#ffcda8', '#ffd8b8', '#ffe5c9', '#fff0dd', // 橙色系
  '#c4e3ff', '#d8edff', '#e6f4ff', '#f0f9ff', // 蓝色系
  '#c9f7c9', '#d7fbd7', '#e5ffe5', '#f1fff1', // 绿色系
  '#e0c4ff', '#ead8ff', '#f2e6ff', '#f8f0ff'  // 紫色系
];

Page({

  /**
   * 页面的初始数据
   */
  data: {
    title: '',
    titleError: '',
    itemError: '',
    showModal: false,
    editIndex: -1,
    currentItem: {
      name: '',
      color: ''
    },
    colors: PRESET_COLORS,
    wheelConfig: {
      title: '幸运转盘',
      items: [], // 保存用户添加的选项数据（后端存储用）
      rotationTime: 4000,
      soundEffect: true,
      animation: true,
      // lucky-wheel组件配置
      blocks: [{ padding: '10px', background: '#ffffff' }],
      prizes: [],
      buttons: [
        { radius: '40%', background: '#ffffff' }
      ],
      defaultStyle: {
        fontColor: '#333333',
        fontSize: '14px',
        fontWeight: '500',
        textAlign: 'center',
        background: '#f7f8fa',
        wordWrap: true,
        lengthLimit: '90%'
      },
      defaultConfig: {
        gutter: 0,
        speed: 20,
        accelerationTime: 2500,
        decelerationTime: 2500
      }
    },
    isEdit: false,
    wheelId: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if (options && options.id) {
      this.setData({
        isEdit: true,
        wheelId: options.id
      });
      this.loadWheelConfig(options.id);
    } else {
      this.initDefaultItems();
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 获取组件实例
    this.luckyWheel = this.selectComponent('#lucky-wheel');
    if (!this.luckyWheel) {
      console.error('未找到lucky-wheel组件实例');
      // 延迟重试
      setTimeout(() => {
        this.luckyWheel = this.selectComponent('#lucky-wheel');
        if (this.luckyWheel) {
          console.log('lucky-wheel组件初始化成功');
          this.updateWheelPrizes();
        }
      }, 500);
    } else {
      console.log('lucky-wheel组件初始化成功');
      this.updateWheelPrizes();
    }
  },

  /**
   * 初始化默认选项
   */
  initDefaultItems() {
    const defaultItems = [
      { name: '选项1', color: PRESET_COLORS[0] },
      { name: '选项2', color: PRESET_COLORS[4] }
    ];
    
    this.setData({
      'wheelConfig.items': defaultItems
    }, () => {
      this.updateWheelPrizes();
    });
  },

  /**
   * 更新转盘奖品配置
   */
  updateWheelPrizes() {
    if (!this.data.wheelConfig.items || this.data.wheelConfig.items.length === 0) {
      console.log('没有可用的选项，不更新转盘');
      return;
    }

    console.log('更新转盘选项:', this.data.wheelConfig.items);

    // 将items转换为lucky-canvas组件需要的prizes格式
    const prizes = this.data.wheelConfig.items.map((item, index) => {
      return {
        id: index,
        name: item.name,
        background: item.color || '#FFFFFF',
        fonts: [{ 
          text: item.name, 
          top: '45%',
          fontSize: '14px',
          fontWeight: '500',
          fontColor: '#333333'
        }]
      };
    });

    // 根据旋转时间计算加速和减速时间
    const rotationTime = this.data.wheelConfig.rotationTime;
    const halfTime = rotationTime / 2;
    
    // 更新组件配置
    const config = {
      'wheelConfig.prizes': prizes,
      'wheelConfig.blocks': [{
        padding: '10px',
        background: '#ffffff',
        borderRadius: '50%'
      }],
      'wheelConfig.buttons': [{
        radius: '40%',
        background: '#ffffff',
        fonts: [{ text: 'GO', fontSize: '20px', fontWeight: 'bold', fontColor: '#07c160' }]
      }],
      'wheelConfig.defaultConfig': {
        gutter: 0,
        speed: 20,
        accelerationTime: halfTime,
        decelerationTime: halfTime,
        stopRange: 0.5
      }
    };
    
    this.setData(config, () => {
      console.log('转盘配置更新完成:', config);
      // 强制更新组件
      if (this.luckyWheel && typeof this.luckyWheel.play === 'function') {
        setTimeout(() => {
          this.luckyWheel.play();
          setTimeout(() => {
            this.luckyWheel.stop();
          }, 100);
        }, 100);
      }
    });
  },

  /**
   * 加载已有转盘配置
   */
  loadWheelConfig: function (id) {
    const _this = this;
    wx.showLoading({
      title: '加载中',
    });

    // 这里应该从服务器或本地存储中获取配置
    // 示例：从本地存储中获取
    wx.getStorage({
      key: 'wheelConfig_' + id,
      success(res) {
        console.log('加载配置成功', res.data);
        _this.setData({
          title: res.data.title,
          'wheelConfig.title': res.data.title || '幸运转盘',
          'wheelConfig.items': res.data.items || [],
          'wheelConfig.rotationTime': res.data.rotationTime || 4000,
          'wheelConfig.soundEffect': res.data.soundEffect !== false,
          'wheelConfig.animation': res.data.animation !== false
        }, () => {
          _this.updateWheelPrizes();
          
          // 更新旋转时间
          if (_this.data.wheelConfig.rotationTime) {
            const rotationTime = _this.data.wheelConfig.rotationTime;
            const halfTime = rotationTime / 2;
            _this.setData({
              'wheelConfig.defaultConfig.accelerationTime': halfTime,
              'wheelConfig.defaultConfig.decelerationTime': halfTime
            });
          }
        });
      },
      fail(err) {
        console.error('加载配置失败', err);
        wx.showToast({
          title: '加载配置失败',
          icon: 'none'
        });
      },
      complete() {
        wx.hideLoading();
      }
    });
  },

  /**
   * 标题输入处理
   */
  onTitleInput: function(e) {
    this.setData({
      title: e.detail.value,
      'wheelConfig.title': e.detail.value,
      titleError: ''
    });
  },

  /**
   * 编辑选项
   */
  editItem: function(e) {
    const index = e.currentTarget.dataset.index;
    const item = this.data.wheelConfig.items[index];
    this.setData({
      showModal: true,
      editIndex: index,
      currentItem: { ...item }
    });
  },

  /**
   * 删除选项
   */
  deleteItem: function(e) {
    const index = e.currentTarget.dataset.index;
    console.log('删除选项，索引:', index);
    const items = this.data.wheelConfig.items.filter((_, i) => i !== index);
    console.log('删除选项后剩余数量:', items.length);
    
    this.setData({
      'wheelConfig.items': items
    }, () => {
      console.log('选项删除完成，准备更新转盘');
      // 强制延迟一点时间，确保数据已经更新
      setTimeout(() => {
        this.updateWheelPrizes();
      }, 50);
    });
  },

  /**
   * 添加选项
   */
  addItem: function() {
    this.setData({
      showModal: true,
      editIndex: -1,
      currentItem: {
        name: '',
        color: this.data.colors[0]
      }
    });
  },

  /**
   * 旋转时间变化处理
   */
  onRotationTimeChange: function(e) {
    // 将秒转换为毫秒保存
    const rotationTime = e.detail.value * 1000;
    const halfTime = rotationTime / 2;
    
    this.setData({
      'wheelConfig.rotationTime': rotationTime,
      'wheelConfig.defaultConfig.accelerationTime': halfTime,
      'wheelConfig.defaultConfig.decelerationTime': halfTime
    });
  },

  /**
   * 切换声音效果
   */
  toggleSoundEffect: function(e) {
    this.setData({
      'wheelConfig.soundEffect': e.detail.value
    });
  },

  /**
   * 切换动画效果
   */
  toggleAnimation: function(e) {
    this.setData({
      'wheelConfig.animation': e.detail.value
    });
  },

  /**
   * 选项输入处理
   */
  onItemNameInput: function(e) {
    this.setData({
      'currentItem.name': e.detail.value,
      itemError: ''
    });
  },

  /**
   * 实时修改选项名称
   */
  onItemChange: function(e) {
    const index = e.currentTarget.dataset.index;
    const value = e.detail.value;
    
    // 更新选项名称
    const items = this.data.wheelConfig.items;
    items[index].name = value;
    
    this.setData({
      'wheelConfig.items': items
    }, () => {
      // 更新转盘组件
      this.updateWheelPrizes();
    });
  },

  /**
   * 判断颜色是否已被使用
   * 在编辑现有选项时，排除当前选项
   */
  isColorUsed: function(color) {
    if (!color) return false;
    
    const items = this.data.wheelConfig.items;
    const currentIndex = this.data.editIndex;
    
    for (let i = 0; i < items.length; i++) {
      // 如果正在编辑现有选项，排除自己
      if (currentIndex >= 0 && i === currentIndex) {
        continue;
      }
      if (items[i].color === color) {
        return true;
      }
    }
    return false;
  },

  /**
   * 选择颜色处理
   */
  selectColor: function (e) {
    const color = e.currentTarget.dataset.color;
    
    // 如果颜色已被使用，不允许选择
    if (this.isColorUsed(color)) {
      return;
    }
    
    this.setData({
      'currentItem.color': color
    });
  },

  /**
   * 取消添加/编辑选项
   */
  cancelModal: function() {
    this.setData({
      showModal: false,
      currentItem: {
        name: '',
        color: ''
      },
      itemError: ''
    });
  },

  /**
   * 确认添加/编辑选项
   */
  confirmModal: function() {
    // 验证输入
    if (!this.data.currentItem.name.trim()) {
      this.setData({
        itemError: '请输入选项名称'
      });
      return;
    }

    // 获取当前项目列表的副本
    const items = [...this.data.wheelConfig.items];
    
    // 创建新选项
    const newItem = {
      name: this.data.currentItem.name.trim(),
      color: this.data.currentItem.color || this.data.colors[0]
    };

    // 根据是新增还是编辑来更新列表
    if (this.data.editIndex === -1) {
      // 新增
      items.push(newItem);
    } else {
      // 编辑
      items[this.data.editIndex] = newItem;
    }

    console.log('确认选项变更，更新前items数量:', this.data.wheelConfig.items.length);
    console.log('确认选项变更，更新后items数量:', items.length);

    // 更新数据
    this.setData({
      'wheelConfig.items': items,
      showModal: false,
      currentItem: {
        name: '',
        color: ''
      },
      editIndex: -1,
      itemError: ''
    }, () => {
      console.log('选项更新完成，准备更新转盘');
      // 强制延迟一点时间，确保数据已经更新
      setTimeout(() => {
        this.updateWheelPrizes();
      }, 50);
    });
  },

  /**
   * 验证表单
   */
  validateForm: function () {
    let isValid = true;
    
    // 检查标题
    if (!this.data.title.trim()) {
      this.setData({
        titleError: '请输入转盘标题'
      });
      isValid = false;
    }
    
    // 检查选项
    if (this.data.wheelConfig.items.length < 2) {
      wx.showToast({
        title: '至少需要2个选项',
        icon: 'none'
      });
      isValid = false;
    }
    
    return isValid;
  },

  /**
   * 保存配置
   */
  saveConfig: function () {
    if (!this.validateForm()) {
      return;
    }
    
    const config = {
      id: this.data.isEdit ? this.data.wheelId : 'wheel_' + new Date().getTime(),
      title: this.data.title,
      items: this.data.wheelConfig.items,
      rotationTime: this.data.wheelConfig.rotationTime,
      soundEffect: this.data.wheelConfig.soundEffect,
      animation: this.data.wheelConfig.animation,
      createTime: new Date().getTime()
    };
    
    console.log('保存配置', config);
    
    // 保存到本地存储
    wx.setStorage({
      key: 'wheelConfig_' + config.id,
      data: config,
      success: () => {
        wx.showToast({
          title: '保存成功',
          icon: 'success'
        });
        
        // 如果是新建，将转盘ID添加到转盘列表中
        if (!this.data.isEdit) {
          this.addToWheelList(config.id);
        }
        
        // 延迟返回上一页
        setTimeout(() => {
          wx.navigateBack();
        }, 1500);
      },
      fail: (err) => {
        console.error('保存失败', err);
        wx.showToast({
          title: '保存失败',
          icon: 'none'
        });
      }
    });
  },

  /**
   * 将新转盘添加到转盘列表
   */
  addToWheelList: function (wheelId) {
    wx.getStorage({
      key: 'wheelList',
      success: (res) => {
        const wheelList = res.data || [];
        wheelList.unshift(wheelId);
        wx.setStorage({
          key: 'wheelList',
          data: wheelList
        });
      },
      fail: () => {
        // 如果不存在列表，创建新的
        wx.setStorage({
          key: 'wheelList',
          data: [wheelId]
        });
      }
    });
  },

  /**
   * 转盘开始转动事件
   */
  onStart() {
    console.log('转盘开始转动');
  },

  /**
   * 转盘停止转动事件
   */
  onEnd(e) {
    console.log('转盘停止转动', e.detail);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 页面显示时重新初始化转盘
    if (this.luckyWheel) {
      this.updateWheelPrizes();
    }
  }
})